<template>
  <Dialog
    title="操作日志详细"
    :fullscreen="true"
    :model-value="visible"
    width="1000px"
    maxHeight="380px"
    :before-close="closeForm"
  >
    <Descriptions
      :schema="schema"
      minWidth="200px"
      labelAlign="right"
      :column="2"
      :data="log"
      label-width="120px"
    />
  </Dialog>
</template>

<script>
import { get } from '@/api/opt/operateLog'
import { HrLoginUserType, HrItemDic } from '@/config/publicDic'
import { GetItemName } from '@/api/base/dictItem'
import { Descriptions } from '@/components/Descriptions'
import { h } from 'vue'
import { Dialog } from '@/components/Dialog'
import { formatTime } from '@/utils'
export default {
  components: {
    Descriptions,
    Dialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      log: {},
      schema: [
        {
          field: 'Title',
          label: '模块标题'
        },
        {
          field: 'EmpName',
          label: '人员名称'
        },
        {
          field: 'DeptName',
          label: '部门名称'
        },
        {
          field: 'BusType',
          label: '业务类型',
          slots: {
            default: () => {
              if (this.log.BusType == null || this.busType == null) {
                return null
              }
              return this.busType[this.log.BusType]
            }
          }
        },
        {
          field: 'UserType',
          label: '用户类型',
          slots: {
            default: () => {
              if (this.log.UserType == null) {
                return null
              }
              return HrLoginUserType[this.log.UserType].text
            }
          }
        },
        {
          field: 'Uri',
          label: '请求路径',
          span: 4
        },
        {
          field: 'Referer',
          label: 'Web路径',
          span: 4
        },
        {
          field: 'Ip',
          label: 'Ip'
        },
        {
          field: 'Address',
          label: '访问地址',
          span: 4
        },
        {
          field: 'IsSuccess',
          label: '是否成功',
          slots: {
            default: () => {
              if (this.log.IsSuccess != null) {
                return h(
                  'span',
                  {
                    style: {
                      color: this.log.IsSuccess ? '#43AF2B' : '#999'
                    }
                  },
                  this.log.IsSuccess ? '成功' : '失败'
                )
              }
              return null
            }
          }
        },
        {
          field: 'FailShow',
          label: '失败原因',
          slots: {
            default: () => {
              if (this.log.IsSuccess) {
                return null
              }
              return this.log.FailShow == null ? this.log.ErrorCode : this.log.FailShow
            }
          }
        },
        {
          field: 'Duration',
          label: '耗时',
          slots: {
            default: () => {
              return this.log.Duration + '毫秒'
            }
          }
        },
        {
          field: 'AddTime',
          label: '添加时间',
          slots: {
            default: () => {
              return formatTime(this.log.AddTime, 'yyyy-MM-dd HH:mm:ss')
            }
          }
        }
      ]
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.loadItem()
  },
  methods: {
    async loadItem() {
      this.busType = await GetItemName(HrItemDic.OperateBusType)
    },
    async reset() {
      const data = await get(this.id)
      data.Result = JSON.parse(data.Result)
      data.Result = JSON.stringify(data.Result, null, 2)
      if (data.ReqParam != null) {
        data.ReqParam = JSON.parse(data.ReqParam)
        data.ReqParam = JSON.stringify(data.ReqParam, null, 2)
      }
      this.log = data
    },
    closeForm() {
      this.$emit('update:visible', false)
    }
  }
}
</script>
